<template>
    <div class="boxShadow stationSetComponent">
        <el-form ref="ruleForm" class="wifiForm">
            <p class="boldTitle">编辑站点</p>
            <el-form-item class="">
                <div class="flex formItem">
                    <div class="itemLeft">站点名称</div>
                    <div class="itemRight"><input type="text" placeholder="请输入站点名称" v-model="stationForm.stationName"></div>
                </div>
            </el-form-item>

            <el-form-item>
                <div class="flex formItem">
                    <div class="itemLeft">站点类型</div>
                    <div class="itemRight">
                        <el-select v-model="stationForm.type" placeholder="请选择站点类型" @change="changeStationType" size="mini" class="stationType">
                            <el-option
                            v-for="item in stationForm.stationType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </el-form-item>

            <!-- 默认站点模式 -->
            <el-form-item class="" v-show="showStationMode">
                <div class="flex formItem">
                    <div class="itemLeft">站点模式</div>
                    <div class="itemRight">
                        <el-select v-model="stationForm.mode" placeholder="请选择站点模式" size="mini" class="stationType">
                            <el-option
                            v-for="item in stationForm.stationMode"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </el-form-item>

            <!-- 站点列表模式 -->
            <el-form-item class="" v-show="showGotoStationMode">
                <div class="flex formItem">
                    <div class="itemLeft">站点模式</div>
                    <div class="itemRight">
                        <el-select v-model="stationForm.gotoMode" placeholder="请选择站点模式" size="mini" class="stationType">
                            <el-option
                            v-for="item in this.$store.state.stationList"
                            :key="item.name"
                            :label="item.name"
                            :value="item.name">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </el-form-item>
           

            <div class="flex formBtns">
                <el-button size="small" type="primary" @click="subUpdate()">提交</el-button>
            </div>
        </el-form>
    </div>    
</template>

<script>
export default {
    name: 'stationEdit',
    components:{

    },
    data(){
        return{
            stationForm: {
                stationName: '',
                stationType: [{
                    value: 'goal',
                    label: '目标站点'
                }, {
                    value: 'dock',
                    label: '充电桩'
                }, {
                    value: 'timer',
                    label: '计时器'
                }, {
                    value: 'publisher',
                    label: '发布器'
                }, {
                    value: 'subscriber',
                    label: '订阅器'
                }, {
                    value: 'looper',
                    label: '循环'
                }, {
                    value: 'pubsuber',
                    label: '发布-订阅器'
                }, {
                    value: 'cmd_vel_set_sub',
                    label: '最大速度设置'
                }, {
                    value: 'cmd_vel',
                    label: '速度发布器'
                }, {
                    value: 'shell',
                    label: '命令发布器'
                }, {
                    value: 'sound_play',
                    label: '声音播放'
                }, {
                    value: 'initial_pose',
                    label: '初始位置'
                }, {
                    value: 'scan_marker',
                    label: '充电桩定位'
                }, {
                    value: 'shell_string',
                    label: 'Shell命令'
                }, {
                    value: 'pallet',
                    label: 'Pallet'
                }, {
                    value: 'bias',
                    label: 'Bias'
                }, {
                    value: 'call',
                    label: 'Call'
                }, {
                    value: 'goto',
                    label: 'Goto'
                }],
                type: '目标站点',
                stationMode:[{
                    value: 'LOOP',
                    label: '多次'
                }, {
                    value: 'LOOP2',
                    label: 'LOOP2'
                }, {
                    value: 'BACK',
                    label: 'BACK'
                }, {
                    value: 'BACK2',
                    label: 'BACK2'
                }, {
                    value: 'NONE',
                    label: '单次'
                }],
                mode:'多次',
                
            },
            showStationMode: true,
            gotoMode: '',
            showGotoStationMode: false,
        }
    },
    mounted(){
        
    },

    watch:{
       '$store.state.robotPosition':function(val){
            this.stationForm.positionX = val.positionX;
            this.stationForm.positionY = val.positionY;
            this.stationForm.positionZ = val.positionZ;
            this.stationForm.orientationX = val.orientationX;
            this.stationForm.orientationY = val.orientationY;
            this.stationForm.orientationZ = val.orientationZ;
            this.stationForm.orientationW = val.orientationW;
            this.stationForm.yaw = val.yaw;
        }
       
       
    },

    methods:{
        //选择站点类型
        changeStationType(type){
            let that = this;
            that.showFrameId = false;
            that.showSubscribeValue = false;
            that.showStationMode = true,
            that.showVoiceStationMode = false;
            that.showGotoStationMode = false;
            that.showCallStationMode = false;
            that.showPosition = true;
            that.showOrientation = true;
            that.showYaw = true;
            switch(type){
                case 'goal':
                that.showFrameId = true;
                break;

                case 'pubsuber':
                that.showSubscribeValue = true;
                break;

                case 'sound_play':
                that.showStationMode = false;
                that.showVoiceStationMode = true;
                that.showGotoStationMode = false;
                that.showCallStationMode = false;
                break;

                case 'goto':
                that.showStationMode = false;
                that.showVoiceStationMode = false;
                that.showGotoStationMode = true;
                that.showCallStationMode = false;
                break;

                case 'call':
                that.showStationMode = false;
                that.showVoiceStationMode = false;
                that.showGotoStationMode = false;
                that.showCallStationMode = true;
                break;

                case 'initial_pose':
                that.showFrameId = true;
                break;

                default:
                
                break;
            }
        },
        //提交
        subUpdate(formName) {
            let options = {};
            options.name = this.name;
            options.type = this.type;
            options.mode = this.mode;
            options.scope = this.scope;
            options.time = this.time;
          console.log(this.type)  
        },
    },

}
</script>

<style scoped lang="less">
 .stationSetComponent{
     position: fixed;
     bottom: 0;
     left: 60px;
     width: calc(100% - 120px);
     background-color: #ffffff;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     padding: 10px;
     text-align: left;
     font-size: 14px;
     z-index: 999;
 }
 .boldTitle{
     font-weight: bold;
     margin-bottom: 7.5px;
 }
 .formItem{
    padding: 10px 0;
     border-bottom: 1px solid #eeeeee;
    .itemLeft{
        flex: 4
    }
    .itemRight{
        flex: 6;
        input{
            width: 100%;
            height: 100%;
            display: block;            
        }
    }
 }
 .stationType{
     input{
         height: 10px;
     }
     .el-input__icon{
         height:inherit
     }
     .el-input__inner{
         height: normal;
         line-height: normal
     }
    width: 100%;
        //清除select的边框样式
    border: none;
    //清除select聚焦时候的边框颜色
    outline: none;
    padding-left: 0.7em;
    // option::-ms-expand{ display: none; }
}
 .formBtns{
     padding: 0 5px;
     margin-top: 15px;
     button{
         width: 100%;
     }
 }
 .el-form-item{
     margin-bottom: 0;
 }
 .wifiForm div{
    line-height:normal;
 }
 
  .el-form-item__content{
        line-height: 20px;
    }
</style>